<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Check, Close } from '@element-plus/icons-vue'

const router = useRouter()
const yearly = ref(true)

const togglePlan = () => {
  yearly.value = !yearly.value
}

const goToRegister = () => {
  router.push('/register')
}
</script>

<template>
  <div class="pricing-page">
    <!-- 头部区域 -->
    <div class="header-section">
      <div class="container">
        <div class="header-content">
          <h1 class="animate-fade-up">价格方案</h1>
          <p class="animate-fade-up" style="--delay: 0.2s">选择适合您需求的套餐，提升您的图片水印体验</p>
          
          <!-- 计费方式切换 -->
          <div class="billing-toggle animate-fade-up" style="--delay: 0.3s">
            <span :class="{ active: !yearly }">月付</span>
            <div class="toggle-switch" @click="togglePlan">
              <div class="toggle-indicator" :class="{ 'yearly': yearly }"></div>
            </div>
            <span :class="{ active: yearly }">年付 <span class="discount">省20%</span></span>
          </div>
        </div>
      </div>
      <div class="header-wave">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none">
          <path fill="#ffffff" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,229.3C672,224,768,192,864,165.3C960,139,1056,117,1152,122.7C1248,128,1344,160,1392,176L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
        </svg>
      </div>
    </div>

    <!-- 价格卡片区域 -->
    <div class="container">
      <div class="pricing-cards">
        <!-- 免费方案 -->
        <div class="pricing-card free animate-fade-up" style="--delay: 0.4s">
          <div class="card-header">
            <h2>免费版</h2>
            <div class="price">
              <span class="amount">¥0</span>
              <span class="period">永久免费</span>
            </div>
            <p>适合个人临时使用</p>
          </div>
          <div class="card-body">
            <ul class="features-list">
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>每日处理最多 5 张图片</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>基础水印添加</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>最大支持 5MB 图片</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>标准导出格式</span>
              </li>
              <li class="disabled">
                <el-icon class="icon-close"><Close /></el-icon>
                <span>批量处理功能</span>
              </li>
              <li class="disabled">
                <el-icon class="icon-close"><Close /></el-icon>
                <span>高级水印模板</span>
              </li>
              <li class="disabled">
                <el-icon class="icon-close"><Close /></el-icon>
                <span>优先处理队列</span>
              </li>
              <li class="disabled">
                <el-icon class="icon-close"><Close /></el-icon>
                <span>客户支持服务</span>
              </li>
            </ul>
          </div>
          <div class="card-footer">
            <button class="btn-secondary" @click="goToRegister">免费注册</button>
          </div>
        </div>

        <!-- 专业方案 -->
        <div class="pricing-card pro animate-fade-up" style="--delay: 0.5s">
          <div class="popular-tag">最受欢迎</div>
          <div class="card-header">
            <h2>专业版</h2>
            <div class="price">
              <span class="amount">¥{{ yearly ? '99' : '9.9' }}</span>
              <span class="period">{{ yearly ? '/年' : '/月' }}</span>
            </div>
            <p>适合专业用户和小型团队</p>
          </div>
          <div class="card-body">
            <ul class="features-list">
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>无限处理图片数量</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>高级水印添加与删除</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>最大支持 20MB 图片</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>多种导出格式选择</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>批量处理功能</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>10+ 水印模板</span>
              </li>
              <li class="disabled">
                <el-icon class="icon-close"><Close /></el-icon>
                <span>优先处理队列</span>
              </li>
              <li class="disabled">
                <el-icon class="icon-close"><Close /></el-icon>
                <span>专属客户经理</span>
              </li>
            </ul>
          </div>
          <div class="card-footer">
            <button class="btn-primary" @click="goToRegister">立即订阅</button>
          </div>
        </div>

        <!-- 企业方案 -->
        <div class="pricing-card enterprise animate-fade-up" style="--delay: 0.6s">
          <div class="card-header">
            <h2>企业版</h2>
            <div class="price">
              <span class="amount">¥{{ yearly ? '299' : '29.9' }}</span>
              <span class="period">{{ yearly ? '/年' : '/月' }}</span>
            </div>
            <p>适合企业和团队用户</p>
          </div>
          <div class="card-body">
            <ul class="features-list">
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>无限处理图片数量</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>高级水印添加与删除</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>最大支持 50MB 图片</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>全部导出格式支持</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>高级批量处理功能</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>自定义水印模板</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>优先处理队列</span>
              </li>
              <li>
                <el-icon class="icon-check"><Check /></el-icon>
                <span>7×24小时专属客户经理</span>
              </li>
            </ul>
          </div>
          <div class="card-footer">
            <button class="btn-enterprise" @click="goToRegister">联系我们</button>
          </div>
        </div>
      </div>

      <!-- FAQ部分 -->
      <div class="pricing-faq animate-fade-up" style="--delay: 0.7s">
        <h2>常见问题</h2>
        <el-collapse>
          <el-collapse-item title="如何选择适合我的方案？" name="1">
            <p>如果您是个人用户且只需要偶尔处理少量图片，免费版完全足够。对于需要经常处理图片的专业用户，推荐选择专业版以获得更多功能和更快的处理速度。企业版则适合需要批量处理大量图片且对安全和服务有更高要求的团队或企业。</p>
          </el-collapse-item>
          <el-collapse-item title="我可以随时升级或降级我的方案吗？" name="2">
            <p>是的，您可以随时在不同方案之间切换。升级时，我们会按照剩余时间比例计算差价。如果您从高级方案降级，新方案将在当前订阅期结束后生效。</p>
          </el-collapse-item>
          <el-collapse-item title="可以获得退款吗？" name="3">
            <p>我们提供30天无条件退款保证。如果您在购买后30天内对我们的服务不满意，可以申请全额退款。超过30天后购买的专业版和企业版将不予退款。</p>
          </el-collapse-item>
          <el-collapse-item title="年付和月付有什么区别？" name="4">
            <p>年付方案可以节省20%的费用，是最经济的选择。月付方案则提供更灵活的选择，适合临时需要使用的用户。两种方案功能完全相同，仅收费周期不同。</p>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<style scoped>
.pricing-page {
  min-height: 100vh;
  background-color: var(--bg-color);
}

/* 头部区域样式 */
.header-section {
  position: relative;
  background: var(--primary-gradient);
  padding: 6rem 0 8rem;
  color: white;
  overflow: hidden;
  z-index: var(--z-header);
  margin-top: 20px;
}

.header-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header-content h1 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: clamp(0.5rem, 2vw, 1rem);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content p {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  opacity: 0.9;
  margin-bottom: 2rem;
}

.header-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
  line-height: 0;
}

.header-wave svg {
  width: 100%;
  height: 100%;
}

/* 计费方式切换 */
.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  padding: 0.5rem;
  width: fit-content;
}

.billing-toggle span {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  opacity: 0.7;
  transition: var(--transition-base);
}

.billing-toggle span.active {
  opacity: 1;
  font-weight: 600;
}

.discount {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  margin-left: 0.5rem;
}

.toggle-switch {
  position: relative;
  width: 50px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  cursor: pointer;
  transition: var(--transition-base);
}

.toggle-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: var(--transition-base);
}

.toggle-indicator.yearly {
  left: calc(100% - 24px);
}

/* 主内容区布局 */
.container {
  width: 100%;
  max-width: var(--container-max-width, 1400px);
  margin: 100px auto 0;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* 价格卡片区域 */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 4vw, 2rem);
  margin-top: -5rem;
  position: relative;
  z-index: var(--z-content);
  margin-bottom: 4rem;
}

.pricing-card {
  background-color: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.pricing-card.pro {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--primary-color);
  z-index: 1;
}

.pricing-card.pro:hover {
  transform: scale(1.05) translateY(-10px);
}

.popular-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--primary-gradient);
  color: white;
  padding: 0.25rem 1rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(19, 194, 194, 0.3);
}

.card-header {
  padding: 2rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.card-header h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--text-color);
}

.price {
  margin-bottom: 1rem;
}

.amount {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-color);
}

.period {
  font-size: 1rem;
  color: var(--text-secondary);
}

.card-header p {
  color: var(--text-secondary);
  margin: 0;
}

.card-body {
  padding: 2rem;
  flex: 1;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.features-list li:last-child {
  margin-bottom: 0;
}

.icon-check, .icon-close {
  margin-right: 0.75rem;
  font-size: 1.1rem;
  margin-top: 0.1rem;
}

.icon-check {
  color: var(--primary-color);
}

.icon-close {
  color: #999;
}

.features-list li.disabled {
  color: #999;
}

.card-footer {
  padding: 2rem;
  text-align: center;
  border-top: 1px solid var(--border-color);
}

button {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  width: 100%;
}

.btn-primary {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 4px 10px rgba(19, 194, 194, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 6px 15px rgba(19, 194, 194, 0.4);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-secondary:hover {
  background-color: rgba(19, 194, 194, 0.05);
  transform: translateY(-2px);
}

.btn-enterprise {
  background: linear-gradient(135deg, #5B5CFF 0%, #3F3FFF 100%);
  color: white;
  box-shadow: 0 4px 10px rgba(91, 92, 255, 0.3);
}

.btn-enterprise:hover {
  box-shadow: 0 6px 15px rgba(91, 92, 255, 0.4);
  transform: translateY(-2px);
}

/* FAQ部分 */
.pricing-faq {
  max-width: 800px;
  margin: 0 auto 4rem;
  padding: 2rem;
  background-color: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.pricing-faq h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  color: var(--text-color);
}

.pricing-faq :deep(.el-collapse) {
  border: none;
}

.pricing-faq :deep(.el-collapse-item__header) {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  padding: 1rem 0;
}

.pricing-faq :deep(.el-collapse-item__content) {
  padding-bottom: 1.5rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 动画效果 */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .pricing-card.pro {
    transform: scale(1);
  }

  .pricing-card.pro:hover {
    transform: translateY(-10px);
  }
}

@media (max-width: 768px) {
  .header-section {
    padding: 3rem 0 6rem;
  }

  .price .amount {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .header-section {
    padding: 2rem 0 5rem;
  }

  .card-header, .card-body, .card-footer {
    padding: 1.5rem;
  }

  .price .amount {
    font-size: 2rem;
  }

  .billing-toggle {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
  }

  .toggle-switch {
    transform: rotate(90deg);
  }
}
</style>